<template>
  <a class="item-card" @click="toDetail(data)">
    <div class="item-content">
      <div class="item-title">
        <span class="title"
          >{{ data.startUser }}提交的{{ data.schemeName }}</span
        >
        <div
          class="status"
          :style="{
            color: data.status ? dict[data.status].color : '',
            backgroundColor: data.status ? dict[data.status].bg : '',
          }"
        >
          {{ data.status ? dict[data.status].text : "" }}
        </div>
        <svg
          class="arrow-right"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          width="24"
          height="24"
          fill="#cccc"
        >
          <path fill="none" d="M0 0h24v24H0z" />
          <path
            d="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z"
          />
        </svg>
      </div>
      <div class="item-body">
        <div class="item-cell">
          <div
            class="item-cell-value"
            v-for="(item) in renderData"
            :key="item.filed_key"
          >
            <span class="label">{{ item.file_title }}：</span
            ><span>{{ data.data[item.filed_key] }}</span>
          </div>
        </div>
      </div>
    </div>
  </a>
</template>

<script>
export default {
  name: "zmItem",
  props: {
    data: {
      type: Object,
      default: {},
    },
  },
  data: function () {
    return {
      dict: Object.freeze({
                0: {
                    color: "#FD513B",
                    text: "已拒绝",
                    bg: "#FFEBEB",
                },
                1: {
                    color: "#10A300",
                    text: "已通过",
                    bg: "#D8F8DD",
                },
                2: {
                    color: "#FE8B04",
                    text: "审批中",
                    bg: "#FFF2E0",
                },
                3: {
                    color: "#FE8B04",
                    text: "审批中",
                    bg: "#FFF2E0",
                },
            }),
    };
  },
  computed: {
    renderData() {
      // if (!this.data.showFileds) {
      //     return []
      // };
      // var renderData = []
      // try {
      //     initData.showFileds.forEach((item) => {
      //         this.data.showFileds.forEach(element => {
      //             if (item.filed_key == element.filed_key) {
      //                 renderData.push(element)
      //             }
      //         });
      //     });
      //     return renderData;
      // } catch (error) {
      //     console.log(error);
      //     return []
      // }
      var renderData = this.data.showFileds.slice();
      //处理情况1
      renderData = renderData.filter((element, index) => {
        if (
          element.is_list == 1 &&
          element.type == 10 &&
          !element.pid &&
          element.enable_show_condition == 0 &&
          this.data.data &&
          this.data.data[element.filed_key]
        ) {
          return true;
        }
        if (
          element.is_list == 1 &&
          element.type == 10 &&
          !element.pid &&
          element.enable_show_condition == 1 &&
          element.condition_column_value.includes(
            this.data.data[element.condition_column_name]
          ) &&
          this.data.data &&
          this.data.data[element.filed_key]
        ) {
          return true;
        }
      });

      return renderData;
    },
  },

  methods: {
    toDetail(item) {
      //   alert("weqweq");
      // return;
      window.location.href = "http://www.baidu.com";
      //   if (type == 1) {
      //     window.sessionStorage.setItem("lookData", JSON.stringify(item));
      //     window.location.href =
      //       "../commonFlowDetail/lookFlow.html?Authorization=" +
      //       window.Authorization;
      //   } else {
      //     window.sessionStorage.setItem("detailData", JSON.stringify(item));
      //     window.location.href =
      //       "../commonFlowDetail/flowDetail.html?Authorization=" +
      //       window.Authorization;
      //   }
    },
  },
  mounted() {},
};
</script>

<style>
</style>